<template>
  <div class="wuliu">
    <div class="powertop">
      <router-link class="powertopli " to="/ziliaoku/ziliaoku">全部商品资料库</router-link>
      <router-link class="powertopli " to="/ziliaoku/kefu">专属资料库页面管理</router-link>
    </div>

    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexc mb20">
        <el-button type="danger" round style="margin-right: 20px;" @click="add">添加资料库分组页</el-button>
      </div>

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >
        <el-table-column align='center' prop='title' label="资料库组名称"></el-table-column>
        <el-table-column align='center' prop='created_at' label="创建时间"></el-table-column>
        <el-table-column align='center' prop='create_by' label="创建人"></el-table-column>
        <el-table-column align='center' prop='num' label="商品数量"></el-table-column>
        <el-table-column align='center' label="钉钉群通知绑定">
          <template slot-scope="scope">
            <div style="margin: 10px; color: #409EFF; cursor: pointer;" @click="bianji(scope.row)">设置</div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="资料页链接">
          <template slot-scope="scope">
            <div style="margin: 10px; color: #409EFF; cursor: pointer;" @click="kefu(scope.row)">复制链接</div>
            
            <div style="margin: 10px; color: #409EFF; cursor: pointer;" @click="kefu2(scope.row)">打开链接</div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="操作" width="300px">
          <template slot-scope="scope">
            <div class="kflexcc" style="color: #409EFF;">
              <div style="margin: 10px; cursor: pointer;" @click="bianji(scope.row)">编辑</div>
              <div style="margin: 10px; cursor: pointer;" @click="$router.push('/ziliaoku/kefu/kefu_shop?id='+scope.row.id)">管理商品</div>
              <div style="margin: 10px; cursor: pointer;" @click="shanchu(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

    <el-dialog title="添加资料库分组页" :visible.sync="log" width="540px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">分组页名称</div>
          <div><el-input v-model="all.title" style="width: 300px;" placeholder="请输入分组页名称"></el-input></div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="f1">钉钉</div>
          <div><el-input v-model="all.dingding" style="width: 300px;" placeholder="请输入钉钉"></el-input></div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="log = false">取消</el-button>
        <el-button type="danger" round @click="addgo">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import chuantu from "@/components/zujian/chuantu.vue";
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
  } from 'xlsx'

  export default {
    name: "wuliu",
    components:{
      chuantu
    },
    data() {
      return {
        loading:false,
        list:"",
        search:{
          page:1,
          page_size:20
        },
        total:0,
        shopid:'',

        all:{
          id:"",
          title:"",
          dingding:""
        },

        relo:true,
        log:false
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()
    },
    mounted() {

    },
    methods: {
      kefu2:function(item){
        let t = location.origin + '/gth/#' + '/shops_list?id='+item.id
        window.open(t)
      },
      kefu:function(item){
        let t = location.origin + '/gth/#' + '/shops_list?id='+item.id
        this.$copyText(t).then(res => {
          this.$message.success("复制成功");
        });

      },
      addgo:function(){
        if(this.all.id){
          axios.post('/api/gth/information/editeGroups',this.all)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`操作成功`);
                this.getlist()
                this.log = false
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }else{
          axios.post('/api/gth/information/addGroups',this.all)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`操作成功`);
                this.getlist()
                this.log = false
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }
      },

      add:function(){
        this.all = {
          id:"",
          title:"",
          dingding:""
        }
        this.log = true
      },

      bianji:function(item){
        this.all = {
          id:item.id,
          title:item.title,
          dingding:item.dingding
        }
        this.log = true
      },

      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/gth/information/deleteGroups?id='+item.id)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      search: function() {
        this.search.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/gth/information/groupsList',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wuliu {
    .powertop {
    	display: flex;
    	background:#f4f4f4;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    
    	color: #727272;
    	// border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    
      border-top: 3px #f4f4f4 solid;
    }
    
    .router-link-active {
    	background: #FFFFFF;  color: #2974FF !important;
      position: relative;
      border-top: 3px #2974FF solid !important ;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-textarea__inner{ font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
